<template>
  <a-card
    :bordered="false"
    class="box_right"
    :head-style="{ textAlign: 'right', height: '48px', display: 'flex', alignItems: 'center' }"
    :body-style="{ height: 'calc(100vh - 120px - 50px)', overflowY: 'auto' }"
  >
    <template #title>
      <a-divider
        direction="vertical"
        style="background-color: #1890ff; width: 20px; height: 32px; visibility: hidden"
      ></a-divider>
      <span style="visibility: hidden">占位</span>
    </template>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" title="字段属性">
        <template v-if="dataObj.selectIndex !== undefined">
          <component
            :is="componentType(dataObj.pageData[dataObj.selectIndex].type)"
            ref="infoViews"
            :key="dataObj.pageData[dataObj.selectIndex].cid"
          />
        </template>
      </a-tab-pane>
      <a-tab-pane key="2" title="表单属性">
        <all-form-config></all-form-config>
      </a-tab-pane>
      <a-tab-pane key="3" title="调试配置">
        注：调试配置仅用于本次调试，不会影响实际使用
        <a-divider></a-divider>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import InputInfo from "@/components/Form/formViews/InputInfo.vue";
import SelectInfo from "@/components/Form/formViews/SelectInfo.vue";
import AllFormConfig from "@/components/Form/formViews/AllFormConfig.vue";
import RadioInfo from "@/components/Form/formViews/RadioInfo.vue";
import UploadInfo from "@/components/Form/formViews/UploadInfo.vue";
import DatePickerInfo from "@/components/Form/formViews/DatePickerInfo.vue";
import TextareaInfo from "@/components/Form/formViews/TextareaInfo.vue";
import InputNumberInfo from "@/components/Form/formViews/InputNumberInfo.vue";
import CheckboxInfo from "@/components/Form/formViews/CheckboxInfo.vue";
import SwitchInfo from "@/components/Form/formViews/SwitchInfo.vue";
import TimePickerInfo from "@/components/Form/formViews/TimePickerInfo.vue";
import DividerInfo from "@/components/Form/formViews/DividerInfo.vue";
import KeyValueInputInfo from "@/components/Form/formViews/KeyValueInputInfo.vue";
import DivModelInfo from "@/components/Form/formViews/DivModelInfo.vue";
import EditorInfo from "@/components/Form/formViews/EditorInfo.vue";
import TreeInfo from "@/components/Form/formViews/TreeInfo.vue";
import CountFormulaInfo from "@/components/Form/formViews/CountFormulaInfo.vue";
import TableInfo from "@/components/Form/formViews/TableInfo.vue";
import CascaderInfo from "@/components/Form/formViews/CascaderInfo.vue";
import TimelineInfo from "@/components/Form/formViews/TimelineInfo.vue";
import TreeSelectInfo from "@/components/Form/formViews/TreeSelectInfo.vue";
import { componentTypeFileName } from "@/components/Form/base/options";
export default {
  name: "FormRight",
  components: {
    AllFormConfig,
    InputInfo,
    SelectInfo,
    RadioInfo,
    UploadInfo,
    DatePickerInfo,
    TextareaInfo,
    InputNumberInfo,
    CheckboxInfo,
    SwitchInfo,
    TimePickerInfo,
    DividerInfo,
    KeyValueInputInfo,
    DivModelInfo,
    EditorInfo,
    TreeInfo,
    CountFormulaInfo,
    TableInfo,
    CascaderInfo,
    TimelineInfo,
    TreeSelectInfo,
  },
  inject: ["dataObj"],
  methods: {
    componentType(value) {
      return componentTypeFileName[value];
    },
    onChange(e) {
      console.log(e.target.value);
      this.dataObj.allFormConfig.isMobile = e.target.value === "mobile";
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .form__box {
  height: 100%;
  overflow-y: auto;
}
/deep/ ::-webkit-scrollbar {
  display: none;
}
</style>
